<!--
 * @Author: your name
 * @Date: 2022-04-02 17:07:51
 * @LastEditTime: 2022-04-02 17:23:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \geyao\geyao\双飞翼布局220402.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>双飞翼布局220402</title>
</head>
<style>
  .float {
    float: left;
  }

  #main {
    width: 100%;
    height: 200px;
    background-color: lightpink;
  }

  #main-wrap {
    margin: 0 190px 0 190px;
  }

  #left {
    width: 190px;
    height: 200px;
    background-color: lightsalmon;
    margin-left: -100%;
  }

  #right {
    width: 190px;
    height: 200px;
    background-color: lightskyblue;
    margin-left: -190px;
  }
</style>

<body>
  <!-- 圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: 
    relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，
在该div里用margin-left和margin-right为左右两栏div留出位置。 -->
  <div id="main" class="float">
    <div id="main-wrap">main</div>
  </div>
  <div id="left" class="float">left</div>
  <div id="right" class="float">right</div>


</body>

</html>